[#ftl]
[@define "agile._Resizable" "" "ResizeHandle=dojox/layout/ResizeHandle"]	
	isResizable:true
	,resizeAxis:"xy"		
	,targetResiableContainer:null
//	,constructor:function(){
//		//agile.requireX("dojox.layout.ResizeHandle");
//	}
	,init:function(){
		if(this._initResizable){return;}
		this._initResizable = true;
				
//		console.log(this.declaredClass,"[agile._Resizable]:init....");

		if(this.resizeAxis == null || this.resizeAxis == "") return;
		
		this.resize();
	
		var resizableTargetContainer = this.getResizableTargetContainer();
		
		//20140706:fix
		if(this.domNode != resizableTargetContainer){
			style.set(this.domNode,"width","auto");
			style.set(this.domNode,"height","auto");
		}

		var resizableTargetId = this.getResizableTargetId();		
		if(resizableTargetId == null && resizableTargetContainer == null){		
			console.error(this.declaredClass,"agile._Resizable:initResizable","resizableTargetId or resizableTargetContainer are null");
			return;
		} 
		
		var resizeHandleParameters = {resizeAxis: this.resizeAxis,minHeight:10,	minWidth:10};
		if(resizableTargetId != null){
			resizeHandleParameters.targetId = resizableTargetId; 
		}else{
			resizeHandleParameters.targetContainer = resizableTargetContainer;
		}
		resizeHandleParameters.activeResize = true;
		
		this.resizeHandle = new ResizeHandle(resizeHandleParameters).placeAt(this.getResizeHandleAnchorNode());
		
		style.set(this.resizeHandle.domNode,"visibility","hidden");

		aspect.after(this,"onDeselected",lang.hitch(this,function(){			
			style.set(this.resizeHandle.domNode,"visibility","hidden");
		}));
		
		aspect.after(this,"onSelected",lang.hitch(this,function(){
			style.set(this.resizeHandle.domNode,"visibility","visible");
			//style.set(this.resizeHandle.domNode,"zIndex",agile.zIndex++);
			style.set(this.resizeHandle.domNode,"zIndex",999999);
		}));
		
		aspect.after(this.resizeHandle,"onResize",lang.hitch(this,function(e){	
			var width1 = this.metadata("style.width");
		    var height1 = this.metadata("style.height");
			   
			  var box = agile.calcSize(this.resizeHandle.targetDomNode);			   
			  this.onResizeStop(box);	
			   
			  var operations = []
			   var width2 = this.metadata("style.width");
			   var height2 = this.metadata("style.height");			   
			   if(width1 != width2){
				   operations.push({action:"update",target:this,category:"style",property:"width",beforeValue:width1,afterValue:width2});
			   }
			   if(height1 != height2){
				   operations.push({action:"update",target:this,category:"style",property:"height",beforeValue:height1,afterValue:height2});
			   }
			   if(operations.length > 0){
				   agile.commit(operations);
			   }
		}),true);

	}	
	[@method "getResizeHandleAnchorNode"/]
	,getResizeHandleAnchorNode:function(){
		return this.domNode;
	}
	[@method "getResizableTargetContainer"/]
	,getResizableTargetContainer:function(){
//		console.error("@@@getResizableTargetContainer");
		if(this.targetResiableContainer == null && this.isContainer){			
			this.targetResiableContainer = this.containerNode;
		}	
		
		return this.targetResiableContainer;		 
	}
	[@method "getResizableTargetId"/]
	,getResizableTargetId:function(){
		return null;		 
	}
	,resize:function(){
		//TODO:the child to implement special logic for itself  
	}
	[@method "getContainerOutterBox"/]
	,getContainerOutterBox:function(){
		return {w:0,h:0};
	}	
	[@method "onResizeStart"/]
	,onResizeStart:function(marginBox){
		////console.log(this.declaredClass,"agile._Resizable:onResizeStart",marginBox);		
	}
	[@method "onResizeStop"/]
	,onResizeStop:function(marginBox){
//		//console.log(this.declaredClass,"agile._Resizable:onResizeStop",marginBox);
		
		if(!this.styleConstraints.width.readOnly(this)){
//		if(!this.attributes["style.width"].ignored){
			topic.publish("agile.widget.changed.styles",this,"style.width",marginBox.w+"px");					
			this.metadata("style.width",(marginBox.w + this.getContainerOutterBox().w)+"px");			
		}
		if(!this.styleConstraints.height.readOnly(this)){
//		if(!this.attributes["style.height"].ignored){
			topic.publish("agile.widget.changed.styles",this,"style.height",marginBox.h+"px");		
			this.metadata("style.height",(marginBox.h + this.getContainerOutterBox().h)+"px");
		}
	}
[/@]
